$name: #{'.' + $namespace + '-font'};

#{$name} {
  --font-color: ;
  --font-shadow: ;
  --font-stroke: ;
  position: relative;

  &__shadow {
    position: absolute;
    @include locate();
    @include gradientFont();
    --color: var(--font-shadow);
    top: 3rpx;
  }

  &__stroke {
    position: absolute;
    @include locate();
    @include gradientStroke();
    --stroke-color: var(--font-stroke);
    color: transparent;
  }

  &__font {
    position: relative;
  }

  &.is-font {
    #{$name}__font {
      @include gradientFont();
      --color: var(--font-color);
    }
  }
}